<template>
    <!-- 用户信息列表 -->
    <el-container>
        <!-- 1-1 页面头部信息 -->
        <el-header class="header-all">
            <!-- 1-1-1 查询区域 -->
            <div style="display: inline">
                <el-input placeholder="请输入要查询的用户姓名" v-model="funame" class="input-name"></el-input>
                <el-button type="primary" icon="el-icon-search" class="but-select">搜索</el-button>
            </div>
            <!-- 1-1-2 功能区域 -->
            <div class="div-header-but">
                <el-button type="primary" class="but-select" icon="el-icon-plus" style="margin-right: 17px;" plain>新增</el-button>
            </div>
        </el-header>

        <el-main>
            <el-table :data="userList">
                <el-table-column prop="code" width="160px" label="人员编号" align="center"></el-table-column>
                <el-table-column prop="uname" width="160px" label="姓名" align="center"></el-table-column>
                <el-table-column prop="sex" width="130px" label="性别" align="center"></el-table-column>
                <el-table-column prop="age" width="140px" label="年龄" align="center"></el-table-column>
                <el-table-column prop="shenfen" width="210px" label="身份证号" align="center"></el-table-column>
                <el-table-column prop="ruTime" width="160px" label="入职时间" align="center"></el-table-column>
                <el-table-column prop="cTime" width="160px" label="创建日期" align="center"></el-table-column>
                <el-table-column width="200px" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" plain>修改</el-button>
                        <el-button type="danger" plain>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <!-- 列表区域 -->
    </el-container>

    <!-- 模板表单 -->
</template>

<script>
export default {
    name: "empList",
    data() {
        return {
            funame: "",
            userList: [
                {
                    "code": "T20230421",
                    "uname": "张三",
                    "sex": "男",
                    "age": "20",
                    "shenfen": "130424200310151436",
                    "ruTime": "2021年04月21日",
                    "cTime": "2021年04月22日",
                },
                {
                    "code": "T20230422",
                    "uname": "李四",
                    "sex": "男",
                    "age": "21",
                    "shenfen": "130424200310151437",
                    "ruTime": "2021年04月22日",
                    "cTime": "2021年04月23日",
                }
            ]
        }
    }
}
</script>

<!-- 1-1-1 开始对应每个控件及页面的样式进行绘制 -->
<style>
.input-name {
    width: 300px;
    margin-top: 20px;
    margin-left: 20px;
    padding: 0px;
    size: mini;
}

.but-select {
    margin-left: 5px;
}

.div-header-but {
    margin-left: 5px;
    margin-right: 20px;
    display: inline;
}

.header-all {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>